<template>
  <div class="seller" ref="seller">
  	 <div class="seller-content">
  	 	<div class="overview">
	        <h1 class="title">{{seller.name}}</h1>
	        <div class="desc">
	          	<star :size="36" :score="seller.score"></star>
	          	<span class="text">({{seller.ratingCount}})</span>
	          	<span class="text">月售{{seller.sellCount}}单</span>
	        </div>
	        <ul class="remark">
	          	<li class="block">
		            <h2>起送价</h2>
		            <div class="content">
		              <span class="stress">{{seller.minPrice}}</span>元
		            </div>
	          	</li>
	          	<li class="block">
	            <h2>商家配送</h2>
		            <div class="content">
		              <span class="stress">{{seller.deliveryPrice}}</span>元
		            </div>
	          	</li>
	          	<li class="block">
		            <h2>平均配送时间</h2>
		            <div class="content">
		              <span class="stress">{{seller.deliveryTime}}</span>分钟
		            </div>
	         	</li>
	        </ul>
	        <!-- 不同的商家有不同的id，以便收藏时区分  
	            app.vue中seller才开始的数据seller需要有一个id
	            要写个立即执行函数
	        -->
	        <div class="favorite" @click="toggleFavorite">
	          	<span class="icon-favorite" :class="{'active':favorite}"></span>
	          	<span class="text">{{favoriteText}}</span>
	        </div>
      	</div>

      	<split></split>
		<div class="bulletin">
	        <h1 class="title">公告与活动</h1>
	        <div class="content-wrapper border-1px">
	          	<p class="content">{{seller.bulletin}}</p>
	        </div>
	        <ul v-if="seller.supports" class="supports">
	          	<li class="support-item border-1px" v-for="(item,index) in seller.supports">
	            	<span class="icon" :class="classMap[seller.supports[index].type]"></span>
	            	<span class="text">{{seller.supports[index].description}}</span>
	          	</li>
	        </ul>
	    </div>

	    <split></split>
		<div class="pics">
        	<h1 class="title">商家实景</h1>
        	<div class="pic-wrapper" ref="picWrapper">
          		<ul class="pic-list" ref="picList">
		            <li class="pic-item" v-for="pic in seller.pics">
		              <img :src="pic" width="120" height="90">
		            </li>
         		</ul>
        	</div>
      	</div>

      	<split></split>
      	<div class="info">
	        <h1 class="title border-1px">商家信息</h1>
	        <ul>
	           	<li class="info-item border-1px" v-for="info in seller.infos">{{info}}</li>
	        </ul>
      	</div>		
  	 </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll';
import star from '../star/star';
import {savaToLocal, loadFromLocal} from '../../common/js/store';
import split from "../split/split.vue"
export default {
  	name: 'seller',
  	props:{
  		seller:Object
  	},
  	components: {
      	star,
     	split
    },
    data () {
    	return {
    		// favorite: false, //默认没有被收藏,从localStorge中取读取，不是一个默认值了
    		favorite: (() => {
	          return loadFromLocal(this.seller.id, 'favorite', false);
	        })()
    	}
    },
    computed:{
    	favoriteText(){
    		// this.favorite为true时，返回"已收藏",否则返回"收藏"
    		return this.favorite ? "已收藏": "收藏"
    	}
    },
    watch: {
      seller() {
	        // 第一次进入时检测seller的变化
	        this.$nextTick(() => {
		        this._initScroll();
		        this._initPics();
	         })
        }
    },
    mounted() {
      // 切换的时候又重新执行一次生命周期
      this._initScroll();
  	  this._initPics();
    },
    created(){
  		this.classMap = ['decrease','discount',"special",'invoice','guarantee']
  	},
  	methods:{
  		_initScroll(){
   			if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.seller, {
                  	click: true
                });
            } else {
                this.scroll.refresh();
            }
   		},
   		_initPics() {
   			if(this.seller.pics){//由于ajax才开始没有加载到数据，导致其不成立,所以使用监听器
   				let picWidth = 120;//图片宽度
   				let margin = 6;//间距
   				let wid = (picWidth + margin) * this.seller.pics.length - margin;
   				this.$refs.picList.style.width = wid +"px";
   				this.$nextTick(()=>{
   					if(!this.picScroll){
   						this.picScroll = new BScroll(this.$refs.picWrapper, {
			                scrollX: true,//当设置为 true 的时候，可以开启横向滚动。
			                eventPassthrough: 'vertical'
			                //有时候我们使用 better-scroll 在某个方向模拟滚动的时候，希望在另一个方向保留原生的滚动（比如轮播图，我们希望横向模拟横向滚动，而纵向的滚动还是保留原生滚动，我们可以设置 eventPassthrough 为 vertical；相应的，如果我们希望保留横向的原生滚动，可以设置eventPassthrough为 horizontal）。
		              	});
   					}else{

   						this.picScroll.refresh();
   					}
   				});
   			}
   		},
   		toggleFavorite(event){
   			if (!event._constructed) {
	          return;
	        }
        	this.favorite = !this.favorite;	
        	savaToLocal(this.seller.id, 'favorite', this.favorite);
   		}
  	}

}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
.seller
	position: absolute
	top: 174px
	bottom: 0
	left: 0
	width: 100%
	overflow: hidden
	.overview
		position: relative
		padding: 18px
		.title
			margin-bottom: 8px
			line-height: 14px
			color: rgb(7, 17, 27)
			font-size: 14px
		.desc
			padding-bottom: 18px
			border-1px(rgba(7, 17, 27, .1))
			font-size: 0
			.star
				display: inline-block
				margin-right: 8px
				vertical-align: top
			.text
				display: inline-block
				margin-right: 12px
				line-height: 18px
				vertical-align: top
				font-size: 10px
				color: rgb(77, 85, 93)
		.remark
			display: flex
			padding-top: 18px
			.block
				flex: 1
				text-align: center
				border-right: 1px solid rgba(7, 17, 27, .1)
				&:last-child
					border: none
				h2
					margin-bottom: 4px
					line-height: 10px
					font-size: 10px
					color: rgb(147, 153, 159)
				.content
					line-height: 24px
					font-size: 10px
					color: rgb(7, 17, 27)
				.stress
					font-size: 24px
		.favorite
			position: absolute
			width: 50px
			right: 11px
			top: 18px
			text-align: center
			.icon-favorite
				display: block
				margin-bottom: 4px
				line-height: 24px
				font-size: 24px
				color: #d4d6d9
				&.active
					color: rgb(240, 20, 20)
			.text
				line-height: 10px
				font-size: 10px
				color: rgb(77, 85, 93)
	.bulletin
		padding: 18px 18px 0 18px
		.title
			margin-bottom: 8px
			line-height: 14px
			color: rgb(7, 17, 27)
			font-size: 14px
		.content-wrapper
			padding: 0px 12px 16px 12px
			border-1px(rgba(7, 17, 27, .1))
			.content
				line-height: 24px
				font-size: 12px
				color: rgb(240, 20, 20)
		.supports
			.support-item
				padding: 16px 12px
				border-1px(rgba(7, 17, 27, .1))
				font-size: 0
				&:last-child
					border-none()
				.icon
					display:inline-block
					vertical-align:top
					width:16px
					height:16px
					margin-right:4px
					background-size:16px 16px
					background-repeat:no-repeat
					&.decrease
						bg-image("decrease_4")
					&.discount
						bg-image("discount_4")
					&.guarantee
						bg-image('guarantee_4')
					&.invoice
						bg-image('invoice_4')
					&.special
						bg-image('special_4')
				.text
					font-size:12px
					line-height:16px
					color: rgb(7, 17, 27)
	.pics
		padding: 18px
		.title
			margin-bottom: 12px
			line-height: 14px
			color: rgb(7, 17, 27)
			font-size: 14px
		.pic-wrapper
			width: 100%
			overflow: hidden
			white-space: nowrap
			.pic-list
				font-size: 0
				.pic-item
					display: inline-block
					margin-right: 6px
					width: 120px
					height: 90px
					&:last-child
						margin: 0
	.info
		padding: 18px 18px 0 18px
		color: rgb(7, 17, 27)
		.title
			padding-bottom: 12px
			line-height: 14px
			border-1px(rgba(7, 17, 27, .1))
			font-size: 14px
		.info-item
			padding: 16px 12px
			line-height: 16px
			border-1px(rgba(7, 17, 27, .1))
			font-size: 12px
			&:last-child
				border-none()


</style>
